
<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-steps v-show="(vdata.showStyle == showStyleEnum.step) && !isMobile" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="经营信息" />
      <a-step title="结算账户" />
      <a-step title="补充资料" />
    </a-steps>
    <a-divider v-show="!isMobile" />
    <a-divider v-show="isMobile" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;"><span style="color: #2980FD;">{{ vdata.currentStep }}</span>/{{ vdata.steps.length }} {{ vdata.steps[vdata.currentStep - 1] }}</a-divider>
    
    <!-- 1. 主体信息  start-->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
      ref="stepForm1Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step1Rules"
    >
      <a-form-item label="商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" @change="identityTypeFunc()">
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
          <a-radio :value="1">小微</a-radio>
        </a-radio-group>
      </a-form-item>

      <!-- vdata.identityType----》》  小微:'经营者'   普通商户:'法人' -->
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">{{ vdata.identityType }}身份信息</a-divider>
      <div v-if="applymentDetailInfo.merchantType">
        <a-form-item :label="vdata.identityType+'身份证人像面照片'" name="idcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanByAccountFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item :label="vdata.identityType + '身份证国徽面照片'" name="idcard2Img">
          <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanByAccountFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
        </a-form-item>
    
        <a-form-item :label="vdata.identityType + '姓名'" name="idcardName">
          <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
        </a-form-item>

        <a-form-item :label="vdata.identityType + '手机号'" name="mobileNo">
          <a-input v-model:value.trim="applymentDetailInfo.mobileNo" />
        </a-form-item>
      
        <a-form-item :label="vdata.identityType + '身份证号'" name="idcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
        </a-form-item>

        <a-form-item :label="vdata.identityType + '身份证有效期开始日期'" name="idcardEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.idcardEffectBegin" />
        </a-form-item>
    
        <a-form-item class="jeepay-valid" :label="vdata.identityType + '身份证有效期结束日期'" name="idcardEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.idcardEffectEnd" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>
      </div>
    </a-form>
    <!-- 1. 主体信息  end-->

    <!-- 2. 经营信息  start-->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
      ref="stepForm2Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step2Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基本信息</a-divider>
     
      
      <a-form-item label="所属行业" name="mccCode">
        <JeepayTerMccSelect v-model:value="applymentDetailInfo.mccCode" :merchantType="applymentDetailInfo.merchantType" />
      </a-form-item>

      <a-form-item label="商户经营地省市县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" @change="searchAreaFunc" />
      </a-form-item>

      <a-form-item label="商户经营详细地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 1" label="经营类型" name="manageType">
        <a-radio-group v-model:value="applymentDetailInfo.manageType">
          <a-radio value="01">门店场所</a-radio>
          <a-radio value="02">流动经营/便民服务</a-radio>
          <a-radio value="03">线上商品/服务交易</a-radio>
        </a-radio-group>
      </a-form-item>
      

      <a-form-item :label="vdata.storeOuterType || '收银台/门头照'" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
        <span class="jeepay-tip-text">小微上送结算人站收银台照，个体和企业上送门头照</span>
      </a-form-item>

      <a-form-item label="经营场所内景照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
        <span class="jeepay-tip-text">拍摄经营地环境照片，如办公室等工作环境，如果是摊位，拍摄摊位的背面照</span>
      </a-form-item>
      
      <div v-if="applymentDetailInfo.merchantType != 1">
        <!-- 原收银台照片的类型，国通接口侧一直无法正常上送，其指导与门头照公用同一个字段 -->
        <!-- <a-form-item label="收银台照片" name="storeCashierImg">
          <JeepayUpload v-model:src="applymentDetailInfo.storeCashierImg" bizType="applyment" />
        </a-form-item> -->

        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照信息</a-divider>
        <a-form-item label="营业执照照片" name="licenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别：营业执照编号、商户全称（可作为商户名称的主营信息）)</span>
        </a-form-item>
      </div>

      <a-form-item label="商户名称（全称）" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
        <span class="jeepay-tip-text">小微类型的商户名称请按照“某某市关键字主营”的格式填写，如福州市张三小吃摊等等</span>
      </a-form-item>

      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" />
        <span class="jeepay-tip-text">小微类型的商户简称请按照“某某市关键字主营”的格式填写，如福州市张三小吃摊</span>
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-form-item label="营业执照编号" name="licenseNo">
          <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
        </a-form-item>

        <a-form-item label="营业执照有效期开始日期" name="licenseEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectBegin" />
        </a-form-item>
        
        <a-form-item class="jeepay-valid" label="营业执照有效期结束日期" name="licenseEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectEnd" :disabled="applymentDetailInfo.licenseEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>
      </div>
    </a-form>
    <!-- 2. 经营信息  end-->
    
    <!-- 3. 结算账户  start-->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
      ref="stepForm3Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step3Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">账户结算</a-divider>
      <a-form-item v-if="applymentDetailInfo.merchantType == 1" label="结算人站门头照" name="stlDoor">
        <JeepayUpload v-model:src="applymentDetailInfo.stlDoor" bizType="applyment" />
        <span class="jeepay-tip-text">结算人的五官不能有遮挡，结算人站在门头或是摊位前</span>
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-form-item label="账户结算类型" name="settAccountType">
          <a-radio-group v-model:value="applymentDetailInfo.settAccountType">
            <a-radio value="B">对公</a-radio>
            <a-radio value="C">法人对私</a-radio>
            <a-radio value="C2">非法人对私</a-radio>
          </a-radio-group>
        </a-form-item>
        
        <a-form-item v-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType == 'B'" label="开户许可证/印鉴卡" name="companyAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
        </a-form-item>

        <div v-if="applymentDetailInfo.settAccountType == 'C2'">
          <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">非法人授权</a-divider>
          <a-form-item label="非法人授权书" name="authCert">
            <JeepayUpload v-model:src="applymentDetailInfo.authCert" bizType="applyment" />
            <a-button style="margin-top:5px" type="primary" shape="round" @click="downloadHref('http://testterpay.postar.cn/yyfsevr/yyfservice/getTemplate')">
              <template #icon>
                <DownloadOutlined />
              </template>
              获取非法人授权书模板
            </a-button>
          </a-form-item>

          <a-form-item label="授权书合影" name="stlAuth">
            <JeepayUpload v-model:src="applymentDetailInfo.stlAuth" bizType="applyment" />
            <span class="jeepay-tip-text">上传【法人手持授权书】或【法人手持授权书与结算人】合影</span>
          </a-form-item>

          <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人身份信息</a-divider>
          <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
            <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
            <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
          </a-form-item>

          <a-form-item label="结算人身份证国徽面照片" name="settAccountIdcard2Img">
            <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
            <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
          </a-form-item>
      
          <a-form-item label="结算人姓名" name="stlName">
            <a-input v-model:value.trim="applymentDetailInfo.stlName" />
          </a-form-item>
      
          <a-form-item label="结算人身份证号码" name="settAccountIdcardNo">
            <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardNo" />
          </a-form-item>

          <a-form-item label="结算人身份证有效期开始日期" name="settAccountIdcardEffectBegin">
            <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardEffectBegin" style="width: 150px;margin-right: 10px;" />
          </a-form-item>
        
          <a-form-item label="结算人身份证有效期结束日期" name="settAccountIdcardEffectEnd">
            <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardEffectEnd" :disabled="applymentDetailInfo.settAccountIdcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
            <a-checkbox :checked="applymentDetailInfo.settAccountIdcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.settAccountIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
          </a-form-item>
        </div>
      </div>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">银行卡信息</a-divider>
      <a-form-item v-if="applymentDetailInfo.merchantType == 1 || applymentDetailInfo.settAccountType == 'C' || applymentDetailInfo.settAccountType == 'C2'" label="银行卡正面照" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanBySettAccountBankCardFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
      </a-form-item>
      
      <a-form-item label="银行卡号（结算账号）" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" />
      </a-form-item>

      <a-form-item label="持卡人姓名（结算户名）" name="settAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" />
        <span class="jeepay-tip-text">填写银行开户名，如：张三</span>
      </a-form-item>

      <a-form-item label="开户行" name="headBankNo">
        <JeepayTerpayBankCodeSelect v-model:value="applymentDetailInfo.headBankNo" @change="getTerBranchBankList" />
      </a-form-item>

      <a-col v-if="applymentDetailInfo.merchantType != 1">
        <a-form-item label="开户支行省市区" name="settAccountBankBranchAreaCode">
          <JeepayAreaSelectTer v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode" @change="getTerBranchBankList" />
        </a-form-item>

        <a-form-item label="支行名称" name="openBankMsg">
          <a-select
            v-model:value="applymentDetailInfo.openBankMsg"
            show-search
            :options="vdata.branchBankList"
            placeholder="选择支行"
            @change="changeBankFunc"
          />
        </a-form-item>
      </a-col>

      <a-form-item v-if="applymentDetailInfo.settAccountType == 'C2'" label="手持结算卡（银行卡）照片" name="filed3">
        <JeepayUpload v-model:src="applymentDetailInfo.filed3" bizType="applyment" />
      </a-form-item>
    </a-form>
    <!-- 3. 结算账户  end-->

    
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 4"
      ref="stepForm4Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 10 }"
      :rules="vdata.step4Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">安心签信息</a-divider>
      <a-form-item label="电子邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" />
      </a-form-item>
      <a-form-item label="安心签登入手机号" name="mobileNo">
        <a-input v-model:value.trim="applymentDetailInfo.mobileNo" />
        <span class="jeepay-tip-text">【请核实】必须和第一步，身份信息里的手机号相同</span>
      </a-form-item>
      <!-- 普通商户（企业和个体） -->
      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-form-item label="企业联系电话" name="contactPhone">
          <a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
        </a-form-item>
      </div>
      <a-form-item label="验证码（首次入网必填）" name="verificationCode">
        <a-input v-model:value.trim="vdata.verificationCode" />
        <a-button style="margin-top:6px" type="primary" :disabled="vdata.isDisabled" shape="round" @click="getAnSignMsg()">
          {{ vdata.codeBtnText }}
        </a-button>
        <span class="jeepay-tip-text">提示：请填写完[安心签信息]除验证码外的全部内容再点击[获取验证码]，发送短信验证码的途中，系统会自动为您进行安心签开户操作，请确保进件参数填写的正确性，不然可能会影响进件结果和后续的交易环节。
          <br>
          注意：【验证码不能重复使用】
        </span>
      </a-form-item>
      <!-- 4. 补充资料  start-->
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">补充资料</a-divider>
      <a-form-item label="补充资料图片" name="filed2">
        <JeepayUpload v-model:src="applymentDetailInfo.filed2" bizType="applyment" />
        <span class="jeepay-tip-text">提示：如果驳回提示某某照片有误，但是实际没问题的，可以将提示有误的图片放在补充资料中进行上送。</span>
      </a-form-item>
      <a-form-item label="补充资料图片" name="filed5">
        <JeepayUpload v-model:src="applymentDetailInfo.filed5" bizType="applyment" />
        <span class="jeepay-tip-text">提示：第二张补充图片。</span>
      </a-form-item>

      <!-- 4. 补充资料  end-->
      
      
      <!-- 5. 费率配置  start-->
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">产品费率</a-divider>
      <div label="补充资料" name="fee" style="width:100%;">
        <JeepayPaywayRatePanel 
          ref="jeepayPaywayRatePanelRef"
          :configMode="configMode"
          :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" 
          :selectIfCode="mchApplymentData.ifCode"
          onlyRate="true"
        />
      </div>
      <!-- 5. 费率配置  end-->
    </a-form>
    <a-divider />
    
    <div class="jeepay-btn-box jeepay-m-btn-box" style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1" type="primary" class="jeepay-m-btn" data-type="inline" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < 4" type="primary" class="jeepay-m-btn" data-type="inline" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {reactive, getCurrentInstance, defineEmits, inject, ref} from 'vue'
import { DownloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import ruleGenerator from '@/utils/ruleGenerator'
import { $terpayGetBankList, $terpayAnSignMsg } from '@/api/manage'

const jeepayPaywayRatePanelRef = ref()

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties


// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}

// emit： 向父组件进行通讯。 
const emit = defineEmits(['itemRender'])

// 参数注入： 是否手机端
let isMobile : any = inject('isMobile')

// 响应式数据
const vdata : any = reactive({
  showStyle: 'step', // 显示类型： step-分步,  block-整页显示 
  steps: ['主体信息', '经营信息', '结算账户', '补充资料'],
  isTempData: false, // 是否保存草稿
  isvDefaultPaywayFee: {} as any, // 服务商默认费率
  currentStep: 1,
  identityType: '', // 经营者 or 法人
  storeOuterType: '', // 结算人站收银台照 or 门头照
  receiverTableData: [] as any,
  branchBankList:[] as any, // 支行列表
  codeBtnText:'发送短信验证码', // 发送验证码提示文字
  isDisabled : false, // 发送验证码按钮，刚进入页面时默认可以点击
  verificationCode: '', // 短信验证码
  step1Rules: {
                merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                idcard1Img: [ ruleGenerator.requiredUpload('身份证人像面照片') ],
                idcard2Img: [ ruleGenerator.requiredUpload('身份证国徽面照片') ],
                idcardName: [ ruleGenerator.requiredInput('姓名') ],
                mobileNo: [ ruleGenerator.requiredInput('手机号') ],
                idcardNo: [ ruleGenerator.requiredInput('身份证号') ], 
                idcardEffectBegin: [ ruleGenerator.requiredInput('身份证有效期开始日期') ],
                idcardEffectEnd: [ ruleGenerator.requiredInput('身份证有效期结束日期') ],
  },
  step2Rules: {
              mccCode: [ ruleGenerator.requiredSelect('所属行业') ],
              areaCode: [ ruleGenerator.requiredSelect('商户经营地省市县', 'array') ],
              address: [ ruleGenerator.requiredInput('详细地址') ],
              manageType: [ ruleGenerator.requiredSelect('经营类型') ],
              storeOuterImg: [ ruleGenerator.requiredUpload('收银台/门头照') ],
              storeInnerImg: [ ruleGenerator.requiredUpload('经营场所内景照') ],   
              storeCashierImg: [ ruleGenerator.requiredUpload('收银台照片') ],  
              licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
              mchFullName: [ ruleGenerator.requiredInput('商户名称（全称）') ],
              mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
              licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
              licenseEffectBegin: [ ruleGenerator.requiredInput('营业执照有效期开始日期') ],
              licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照有效期结束日期') ],
  },
  step3Rules: {
              stlDoor: [ ruleGenerator.requiredUpload('结算人站门头照') ],
              settAccountType: [ ruleGenerator.requiredSelect('结算账户类型') ],
              companyAccountLicenseImg: [ ruleGenerator.requiredUpload('开户许可证/印鉴卡') ],
              settAccountLicenseImg: [ ruleGenerator.requiredUpload('银行卡正面照') ],
              stlAuth: [ ruleGenerator.requiredUpload('授权书合影') ],
              authCert: [ ruleGenerator.requiredUpload('非法人授权书') ],
              settAccountIdcard1Img: [ ruleGenerator.requiredUpload('结算人身份证人像面照片') ],
              settAccountIdcard2Img: [ ruleGenerator.requiredUpload('结算人身份证国徽面照片') ],
              stlName: [ ruleGenerator.requiredInput('结算人姓名') ],
              settAccountIdcardNo: [ ruleGenerator.requiredInput('结算人身份证号码') ],
              settAccountIdcardEffectBegin: [ ruleGenerator.requiredInput('结算人身份证有效期开始日期') ],
              settAccountIdcardEffectEnd: [ ruleGenerator.requiredInput('结算人身份证有效期结束日期') ],
              settAccountName: [ ruleGenerator.requiredInput('持卡人姓名（结算户名）') ],
              settAccountNo: [ ruleGenerator.requiredInput('银行卡号（结算账号）') ],
              headBankNo: [ ruleGenerator.requiredSelect('开户行') ],
              settAccountBankBranchAreaCode: [ ruleGenerator.requiredSelect('开户支行省市区', 'array') ],
              openBankMsg: [ ruleGenerator.requiredSelect('支行名称') ],
              filed3: [ ruleGenerator.requiredInput('手持结算卡（银行卡）照片') ],
  },
  step4Rules: {
              contactEmail: [ ruleGenerator.requiredInput('电子邮箱') ],
              mobileNo: [ ruleGenerator.requiredInput('安心签登入手机号') ],
              contactPhone: [ ruleGenerator.requiredInput('企业联系电话') ]
  }
})


// 接收进件参数(包含 商户号， ifCode )
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo') 
let applymentDetailInfo : any = applymentDetailInfoInject.value
// 清空详情接口带过来的时间戳等信息
applymentDetailInfo.timestamp = null
applymentDetailInfo.ifFirstApply = 'no'


// 参数注入： 配置方式
let configMode : any = inject('configMode')

// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
      vdata.currentStep ++
  })
}

// 上一步
function toPrevStep(){
  vdata.currentStep --
}

function validateAllForm(step: number){
  return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
     if(step >= 4){
      return Promise.resolve()
     }
     return validateAllForm(++step)
     
  })
}

if(applymentDetailInfo.feeData) {
  vdata.receiverTableData = applymentDetailInfo.feeData
}

// 图片识别的回调函数  营业执照
function ocrScanFunc(orcObject){
  if(orcObject){
    if(orcObject.licenseNo){
      applymentDetailInfo.licenseNo = orcObject.licenseNo
    }
    if(orcObject.mchFullName){
      applymentDetailInfo.mchFullName = orcObject.mchFullName
    }
    if(orcObject.licenseEffectBegin){
      applymentDetailInfo.licenseEffectBegin = orcObject.licenseEffectBegin
    }
    if(orcObject.licenseEffectEnd){
      applymentDetailInfo.licenseEffectEnd = orcObject.licenseEffectEnd
    }
 
  }
}

// 识别银行卡信息 
function ocrScanBySettAccountBankCardFunc(orcObject){
  if(orcObject){
     if(orcObject.settAccountNo){
      applymentDetailInfo.settAccountNo = orcObject.settAccountNo
    }
  }
}

// 图片识别的回调函数  身份证（小微和法人）
function ocrScanByAccountFunc(orcObject){
  if(orcObject){
    if(orcObject.idcardName){
      applymentDetailInfo.idcardName = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      applymentDetailInfo.idcardNo = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin){
      applymentDetailInfo.idcardEffectBegin = orcObject.idcardEffectBegin
    }
    if(orcObject.idcardEffectEnd){
      applymentDetailInfo.idcardEffectEnd = orcObject.idcardEffectEnd
    }
  }
}

// 图片识别的回调函数  结算人身份证
function ocrScanBySettAccountFunc(orcObject){
  if(orcObject){    
    if(orcObject.idcardNo){
      applymentDetailInfo.stlName = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin){
      applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
    }
    if(orcObject.idcardEffectEnd){
      applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
    }
  }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){

  // 放置费率配置项
  let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
  if(typeof(paywayFeeList) != 'object'){
      return Promise.reject()
  }

  // 赋值到对象中
  applymentDetailInfo.paywayFeeList = paywayFeeList


  // 站点信息
  applymentDetailInfo.feeData = vdata.receiverTableData
  // 保存草稿只校验当前步骤数据
  if (isTemp) {
    // 不保存验证码
    vdata.verificationCode = ''
    return Promise.resolve()
  }

  // 验证所有表单
  return validateAllForm(1).then(() => {
    // 清空页面上的验证码
    applymentDetailInfo.checkCode = vdata.verificationCode
    vdata.verificationCode = ''
    return Promise.resolve()
  }).catch((params: any) => {
    $infoBox.message.error('数据填写不完整，填写完整再提交')
    return Promise.reject()
  })
}


// 经营地 省市区选择回调
function searchAreaFunc(value) {
  if (applymentDetailInfo.address) {
    applymentDetailInfo.address = ''
  }
  applymentDetailInfo.address = value[0].label + '-' + value[1].label + '-' + value[2].label + '-'
}

// vdata.identityType----》》  小微:''   普通商户:'法人'
function identityTypeFunc() {
  vdata.identityType = ''
  vdata.storeOuterType = ''
  if (applymentDetailInfo.merchantType == 1) {
    vdata.identityType = '经营者'
    vdata.storeOuterType = '结算人站收银台照'
  } else {
    vdata.identityType = '法人'
    vdata.storeOuterType = '门头照'
  }

  // 切换主体类型时，清空行业类型，避免错误提交
  applymentDetailInfo.mccCode = ''
}

defineExpose({ saveDataPreCallback })

// 星驿付获取银行开户支行信息列表
function getTerBranchBankList() {
  applymentDetailInfo.openBankMsg = ''
  vdata.branchBankList = []
  if(applymentDetailInfo.settAccountBankBranchAreaCode && applymentDetailInfo.headBankNo){
    $terpayGetBankList(mchApplymentData.ifCode, { mchNo: mchApplymentData.mchNo, cityCode: applymentDetailInfo.settAccountBankBranchAreaCode[1], bankCode: applymentDetailInfo.headBankNo }).then((res) => {
      if(res && res.records.length) {
          res.records.forEach(element => {
            vdata.branchBankList.push({
              label: element.bankName,
              value: element.bankCode
            })
          })
      }else{
        $infoBox.message.error('该省市下未找到对应支行信息')
      }
    }).catch(() => {})
  }
}

// 星驿付发送短信验证码
function getAnSignMsg() {
  vdata.isDisabled = true
    if(applymentDetailInfo){
      $terpayAnSignMsg(mchApplymentData.ifCode, mchApplymentData.mchNo, mchApplymentData.applyId, applymentDetailInfo).then((res) => {
          // 短信发送成功后，更新进件的时间戳信息
          applymentDetailInfo.timestamp = res
          applymentDetailInfo.ifFirstApply = 'yes'
          // 前端只进行发送成功的提示，如果发送失败，失败信息会交由后端抛出
          message.success('验证码发送成功，请注意短信查收')
      }).catch(() => {
          // 出错后立即停止计时
          if (timer) clearInterval(timer)
          vdata.isDisabled = false
          vdata.codeBtnText = '发送短信验证码'
      })
      }
      let time = 60 // 重发验证码时间
      vdata.codeBtnText = `${time}秒后可重新发送`
      const timer = setInterval(() => {
      time -= 1
      vdata.codeBtnText = `${time}秒后可重新发送`
      if (time === 0) {
        clearInterval(timer)
        vdata.isDisabled = false
        vdata.codeBtnText = '发送短信验证码'
      }
    }, 1000)
}

// 星驿付获取银行开户支行信息 回调
function changeBankFunc(value) {
  console.log('星驿付获取银行开户支行信息 回调',value)

}

// a标签下载 仅用于get且有跨域配置的链接
function downloadHref(url) {
  let a = document.createElement('a')
  a.href = url
  a.click()
}

</script>

<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
.option-left {
  width: 50%;
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
}
.option-right {
  color: rgb(153, 153, 153);
}
.option-bottom {
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
  color: rgb(153, 153, 153);
}
.jeepay-btn-box {
  margin: 15px -12px !important;
}
.jeepay-btn-box .ant-btn {
  margin: 0 10px;
}
</style>